<template>
    <div class="information">

        <!-- 搜索 -->
        <div class="information-search">
            <!-- <div class="header-img"> -->
            <img :src="headerImg" alt="" class="header-img">
            <!-- </div> -->
            <div v-if="route.meta.searchInput">
                <van-search v-model="searchValue" :placeholder="searchContent" @search="onSearch" class="search-input"
                    autocomplete="off" />
            </div>
        </div>

        <!-- 用户信息 -->
        <div class="information-user">
            <div class="user-info">
                <div>
                    <van-icon name="contact-o" color="#fff" size="20px" />
                </div>

                <div class="user-name">{{ store.AppState.userName }}</div>

                <div style="color: #fff;font-size: 14px;" @click="quitClick">退出</div>
            </div>
            <div>
                <van-icon name="setting-o" color="#fff" size="20px" @click="setUpClick" />
            </div>
        </div>

        <van-tabs v-model:active="store.tabActive" @click-tab="clickTab">
            <van-tab v-for="item in tabData" :key="item.path" :title="item.title" :name="item.path"
                :to="item.path"></van-tab>
        </van-tabs>

        <!-- 设置弹窗 -->
        <component :is="setupActionSheetComponent" v-model="setUpShow" />
    </div>
</template>

<script setup lang="ts">
// 通过动态导入方式引入组件
import { defineAsyncComponent, getCurrentInstance } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRoute, useRouter } from 'vue-router'
import { confirmDialog } from '@/utils/confirmDialog'
import setUpActionSheet from '@/view/setUpActionSheet/index.vue'
import headerImg from '@/assets/image/head.png'

const setupActionSheetComponent = defineAsyncComponent(() =>
    import('@/view/setUpActionSheet/index.vue')
)

const route = useRoute()

const router = useRouter()

const store = useUserStore()

const searchContent = computed(() => {
    if (route.path === '/message') {
        return '请输入标题或内容'
    } else {
        return '请输入工单编号、设备编号或标题'
    }
})

const searchValue = ref('')

const setUpShow = ref(false)

const tabData = ref([
    {
        title: '工单',
        path: '/menu/worksheets'
    },
    {
        title: '消息',
        path: '/message'
    },
    {
        title: '检索',
        path: '/ai-retrieval'
    },
])


const setUpClick = () => {
    setUpShow.value = true
}

//tab切换
const clickTab = (value: any) => {
    store.tabActive = value.name
}

//输入框回车事件
const onSearch = () => {
    store.searchName = searchValue.value
}

// 退出
const quitClick = () => {

    const params = {
        title: '提示',
        message: '确定退出系统吗?'
    }

    confirmDialog(params, () => {
        store.AppState.userName = ''

        localStorage.removeItem('mobile_department')

        localStorage.removeItem('mobile_access_token')

        localStorage.removeItem('mobile_refresh_token')

        localStorage.removeItem('mobile_userType')

        // router.replace('/login')

        // 先重置路由，这会销毁所有组件实例
        router.replace('/login').then(() => {
            // 强制刷新当前路由
            if (router.currentRoute.value.path === '/login') {
                window.location.reload();
            }
        });


    })
}

watch(() => searchValue.value, (val) => {
    if (!val) {
        store.searchName = ''
    }
}, {
    immediate: true
})
</script>

<style lang="scss" scoped>
.information {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #000;

    .information-search {
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .header-img {
            width: 70px;
            height: 55px;
            // background: #fff;

            // img {
            //     width: 100%;
            //     height: 100%;
            // }
        }

        .search-input {
            height: 20px;
            background: none;
            padding: 0;

            :deep(.van-search__content) {
                width: 260px;
                height: 28px;
                border-radius: 20px;

                .van-cell {

                    .van-field__left-icon {
                        margin-bottom: 4px;
                    }

                    .van-cell__value {
                        margin-bottom: 4px;
                    }
                }
            }
        }
    }


    .information-user {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;

        .user-info {
            display: flex;
            align-items: center;

            .user-name {
                color: #fff;
                padding-left: 5px;
                padding-right: 5px;
            }
        }
    }

    :deep(.van-tabs) {
        .van-tabs__nav--line {
            height: 17px;
        }

        .van-tabs__nav {
            background: #000;

            .van-tab--active {
                color: #fff;
            }

            .van-tab {
                color: #fff;
                padding-top: 20px;
            }

            .van-tabs__line {
                background: #fff;
                width: 22px;
                height: 2px;

            }
        }

        .van-tabs__line {
            bottom: -2px;
        }
    }
}
</style>